import { createBrowserRouter } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';
import menuData from '../data/menuData.json';

// 动态导入组件工具函数
const lazyLoadComponent = (componentName) => {
  return lazy(() => import(`../page/${componentName}`)
    .catch(() => import('../page/NotFound'))); // 导入失败时加载NotFound组件
};

// 生成所有路由配置
const routes = [...menuData, { path: '/json-formatter', component: 'JsonFormatter' }].map(item => {
  const Component = lazyLoadComponent(item.component);
  return {
    path: item.path,
    element: (
      <Suspense>
        <Component />
      </Suspense>
    )
  };
});

// 根路由配置
const router = createBrowserRouter([
  {
    path: '/',
    element: routes.find(route => route.path === '/').element,
    children: routes.filter(route => route.path !== '/')
  }
]);

export default router;
